<template>
  <view class="banner">
    <TImage
      :class="customClass"
      :src="bannerUrl"
      :preview="true"
      mode="widthFix"
      width="100%"
      height="fit-content"
    />
    <view class="countdown-container">
      <view class="label-box">
        <text class="label-text">距报名结束</text>
      </view>
      <text class="countdown">{{ endTime }}</text>
    </view>
  </view>
</template>
<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import { countDown } from '@/utils/dateUtil';
  import { ref, watch } from 'vue';
  const props = defineProps({
    bannerUrl: {
      type: String,
      default: '',
    },
    endTime: {
      type: String,
      default: '',
    },
    customClass: {
      type: String,
      default: '',
    },
  });

  watch(
    () => props.endTime,
    () => {
      timesDown();
    },
  );

  const endTime = ref('');
  const timesDown = function () {
    const timerRef = ref();
    const timer = function () {
      let timeObj = countDown(props.endTime);
      if (timeObj.totalSecond <= 0) {
        endTime.value = '报名已结束';
        return;
      }
      endTime.value = `${timeObj.d}天${timeObj.h}:${timeObj.m}:${timeObj.s}`;
      timerRef.value = setInterval(() => {
        timeObj = countDown(props.endTime);
        if (timeObj.totalSecond <= 0) {
          endTime.value = '报名已结束';
          clearInterval(timerRef.value);
        } else {
          endTime.value = `${timeObj.d}天${timeObj.h}:${timeObj.m}:${timeObj.s}`;
        }
      }, 1000);
    };
    timer();
  };
</script>
<style lang="scss" scoped>
  .banner {
    width: 100%;
    position: relative;
    .countdown-container {
      height: 112rpx;
      width: 100%;
      background: #222;
      display: flex;
      gap: 24rpx;
      .label-box {
        height: 100%;
        border-radius: 0px 32rpx 0px 0px;
        background: linear-gradient(180deg, #fbc55c 0%, #f46e22 36.3%, #ea5e0e 100%);
        width: 240rpx;
        padding: 8rpx 32rpx;
        box-sizing: border-box;
        .label-text {
          color: #fff;
          font-size: 32rpx;
          line-height: 48rpx;
        }
      }
      .countdown {
        color: #fff;
        font-size: 24rpx;
        line-height: 40rpx;
        margin-top: 16rpx;
      }
    }
  }
</style>
